<template>
<view class="flex-col page">
  <view class="flex-col section">

    <view class="flex-row justify-center items-center relative section_3">
      <image
        class="image_4 pos"
        src="@/static/common/back.png"
        @click="handleBackClick"
      />
      <text class="text_2">{{$t('mine.wallet')}}</text>
      <view class="flex-col justify-start text-wrapper pos_2" @click="handleExchangeClick"><text class="font_2 text_3">{{$t('mine.exchange')}}</text></view>
    </view>
    <view class="flex-col group">
      <view class="flex-col">
        <text class="self-center font_2 text_4">({{$t('mine.tip')}})</text>
        <view class="mt-14 flex-col justify-start self-stretch relative group_2">
          <view class="section_4"></view>
          <view class="flex-col section_5 pos_3">
            <view class="flex-row justify-between items-center group_3">
              <view class="flex-col items-start">
                <text class="font_2 text_5">{{$t('mine.MSDT')}}</text>
                <text class="font_3 mt-15" @click="handleSkipToCoin">{{walletInfo.integral}}></text>
              </view>
              <image
                class="image_5"
                src="@/static/mine/msdt.png"
              />
            </view>
            <view class="flex-row equal-division">
              <view class="flex-col items-center group_4 equal-division-item">
                <text class="font">{{$t('mine.history')}}</text>
                <text class="font_3 mt-17" >{{walletInfo.totalIntegral}}</text>
              </view>
              <view class="horiz-divider section_6"></view>
              <view class="flex-col items-center group_4 equal-division-item">
                <text class="font">{{$t('mine.today')}}</text>
                <text class="font_3 mt-15">{{walletInfo.dayIntegral}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mt-16 flex-row">
        <view class="flex-col items-start section_7 equal-division-item_2">
          <text class="font_2 text_6">{{$t('mine.USDT')}}</text>
          <text class="font_3 mt-11" @click="handleSkipToCoin">{{walletInfo.usdt}}></text>
        </view>
        <view class="flex-col items-start section_7 equal-division-item_2 ml-11">
          <text class="font_2 text_6">{{$t('mine.SDT')}}</text>
          <text class="font_3 mt-11" @click="handleSkipToCoin">{{walletInfo.sdt}}></text>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col relative group_5">
    <view class="flex-col justify-start items-center relative text-wrapper_2" @click="handleRechargeClick">
      <text class="font_3 text_7">{{$t('mine.recharge')}}</text>
    </view>
    <view class="mt-16 flex-row justify-between items-center section_8">
      <view class="flex-col items-start">
        <text class="font_2 text_8">{{$t('mine.pledge')}}</text>
        <text class="font_3 mt-11">{{walletInfo.pledgeSdt}}></text>
      </view>
      <view class="flex-row items-center group_6">
        <text class="font text_9">{{$t('mine.part')}}：</text>
        <text class="ml-6 font_3">{{walletInfo.pledgeRate}}%</text>
      </view>
    </view>
  </view>
</view>
</template>

<script>
  import { getWalletInfo } from "@/service/mine";
export default {
  components: {},
  props: {},
  data() {
    return {
      walletInfo:{}
    };
  },
  mounted() {
    this.getWalletInfo()
  },
  methods: {
    handleBackClick(){
      // uni.navigateBack()
      uni.switchTab({
        url:'/pages/mine/index'
      })

    },
    handleExchangeClick(){
      uni.navigateTo({
        url:'/pages/mine/wallet/exchange/index'
      })
    },
    handleRechargeClick(){
      uni.navigateTo({
        url:'/pages/mine/wallet/recharge/index'
      })
    },
    async getWalletInfo(){
      const res = await getWalletInfo();
      this.walletInfo = res.data;
    },
    handleSkipToCoin(){
      uni.navigateTo({
        url:'/pages/mine/wallet/myCoin'
      })
    }


  },
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}
.ml-11 {
  margin-left: 0.69rem;
}
.mt-11 {
  margin-top: 0.69rem;
}
.mt-17 {
  margin-top: 1.06rem;
}
.mt-15 {
  margin-top: 0.94rem;
}
.page {
  background-image: url('@/static/common/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  // background-color: #140c2b;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .section {
    padding-bottom: 2.13rem;

    .section_2 {
      padding: 1.19rem 1rem 1rem 2.25rem;
      background-color: #33333300;
      .text {
        color: #ffffff;
      }
      .image {
        width: 1.06rem;
        height: 0.56rem;
      }
      .image_2 {
        width: 0.94rem;
        height: 0.56rem;
      }
      .image_3 {
        width: 1.5rem;
        height: 0.71rem;
      }
    }
    .section_3 {
      padding: 1rem;
      background-color: #ffffff00;
      .image_4 {
        border-radius: 0.5rem;
        width: 1.78rem;
        height: 1.78rem;
      }
      .pos {
        position: absolute;
        left: 0.98rem;
        top: 50%;
        transform: translateY(-50%);
      }
      .text_2 {
        color: #ffffff;
        font-size: 1.13rem;
        font-family: PingFang SC;
        line-height: 0.83rem;
      }
      .text-wrapper {
        padding: 0.5rem 0;
        background-color: #0000001a;
        border-radius: 0.5rem;
        backdrop-filter: blur(0.38rem);
        border-left: solid 0.031rem #ffffff33;
        border-right: solid 0.031rem #ffffff33;
        border-top: solid 0.031rem #ffffff33;
        border-bottom: solid 0.031rem #ffffff33;
        .text_3 {
          margin: 0 0.5rem;
          color: #00f6ff;
          line-height: 0.7rem;
        }
      }
      .pos_2 {
        position: absolute;
        right: 0.98rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .group {
      padding: 1rem;
      .text_4 {
        line-height: 0.77rem;
      }
      .group_2 {
        padding-bottom: 3.63rem;
        .section_4 {
          background-image: linear-gradient(118.9deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
          border-radius: 1rem;
          height: 5.87rem;
        }
        .section_5 {
          background-color: #465bc34d;
          border-radius: 1rem;
          box-shadow: 0rem -0.75rem 1.5rem #a20a6d1a inset, 0rem 0.5rem 1rem #00000026;
          backdrop-filter: blur(1rem);
          .group_3 {
            padding: 0.5rem 1rem;
            .text_5 {
              color: #ffffffb3;
              line-height: 0.69rem;
            }
            .image_5 {
              filter: drop-shadow(0rem 0.38rem 0.38rem #483795b3);
              width: 4rem;
              height: 4rem;
            }
          }
          .equal-division {
            padding: 0.75rem 0;
            background-color: #ffffff33;
            border-radius: 1rem;
            box-shadow: 0rem -0.75rem 1.5rem #a20a6d1a inset, 0rem 0.5rem 1rem #00000026;
            backdrop-filter: blur(1rem);
            .group_4 {
              flex: 1 1 10.72rem;
            }
            .equal-division-item {
              padding: 0.25rem 0;
            }
            .horiz-divider {
              margin: 0.75rem 0;
            }
            .section_6 {
              background-color: #ffffff33;
              width: 0.031rem;
              height: 1.5rem;
            }
          }
        }
        .pos_3 {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }
      .section_7 {
        flex: 1 1 10.38rem;
        .text_6 {
          line-height: 0.68rem;
        }
      }
      .equal-division-item_2 {
        padding: 1rem;
        background-color: #ffffff26;
        border-radius: 0.75rem;
        height: 4.19rem;
      }
    }
  }
  .group_5 {
    margin-top: -2.06rem;
    padding: 0 1rem;
    .text-wrapper_2 {
      padding: 1rem 0;
      background-image: linear-gradient(137.2deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      border-radius: 0.75rem;
      box-shadow: 0rem 0rem 1rem #000000b3;
      .text_7 {
        line-height: 0.94rem;
      }
    }
    .section_8 {
      padding: 1rem;
      background-color: #ffffff26;
      border-radius: 0.75rem;
      .text_8 {
        line-height: 0.7rem;
      }
      .group_6 {
        border-left: solid 0.031rem #ffffff33;
        .text_9 {
          margin-left: 1.5rem;
          line-height: 0.55rem;
        }
      }
    }
  }
  .font_3 {
    font-size: 1rem;
    font-family: PingFang SC;
    line-height: 0.74rem;
    color: #ffffff;
  }
  .font_2 {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.74rem;
    color: #ffffff80;
  }
  .font {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.56rem;
    color: #ffffff80;
  }
}
</style>